<!-- 通用错误页面组件 - 处理其他类型的错误 -->
<template>
    <!-- 通用错误页面容器 -->
    <div class="general-error-page">
        <!-- 错误内容容器 -->
        <div class="error-content">
            <!-- 错误图标区域 -->
            <div class="error-icon">
                <el-icon>
                    <component :is="errorIcon" />
                </el-icon>
            </div>

            <!-- 错误标题 -->
            <h1 class="error-title">{{ errorCode }}</h1>

            <!-- 错误副标题 -->
            <h2 class="error-subtitle">{{ errorTitle }}</h2>

            <!-- 错误描述 -->
            <p class="error-description">
                {{ errorDescription }}
            </p>

            <!-- 错误详情（开发环境显示） -->
            <div v-if="isDevelopment && errorDetails" class="error-details">
                <details>
                    <summary>错误详情</summary>
                    <pre class="error-stack">{{ errorDetails }}</pre>
                </details>
            </div>

            <!-- 错误建议区域 -->
            <div v-if="errorSuggestions.length > 0" class="error-suggestions">
                <h3 class="suggestions-title">建议解决方案</h3>
                <ul class="suggestions-list">
                    <li v-for="suggestion in errorSuggestions" :key="suggestion" class="suggestion-item">
                        <el-icon>
                            <Star />
                        </el-icon>
                        {{ suggestion }}
                    </li>
                </ul>
            </div>

            <!-- 操作按钮区域 -->
            <div class="action-buttons">
                <!-- 主要操作按钮 -->
                <el-button v-if="primaryAction" type="primary" @click="handlePrimaryAction" class="primary-btn">
                    <el-icon>
                        <component :is="primaryAction.icon" />
                    </el-icon>
                    {{ primaryAction.text }}
                </el-button>

                <!-- 返回上一页按钮 -->
                <el-button @click="goBack" class="back-btn">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                    返回上一页
                </el-button>

                <!-- 返回首页按钮 -->
                <el-button @click="goHome" class="home-btn">
                    <el-icon>
                        <House />
                    </el-icon>
                    返回首页
                </el-button>

                <!-- 刷新页面按钮 -->
                <el-button @click="reloadPage" class="reload-btn">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    刷新页面
                </el-button>
            </div>

            <!-- 联系支持区域 -->
            <div class="support-section">
                <p class="support-text">
                    如果问题持续存在，请联系我们的技术支持团队
                </p>
                <el-button @click="contactSupport" class="support-btn">
                    <el-icon>
                        <Message />
                    </el-icon>
                    联系技术支持
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理和生命周期管理
 */
import { ref, computed, onMounted } from 'vue'

/**
 * 导入Vue Router
 * @description 用于页面导航和路由信息获取
 */
import { useRouter, useRoute } from 'vue-router'

/**
 * 导入Element Plus图标组件
 * @description 用于界面图标显示
 */
import {
    Warning,
    Refresh,
    House,
    Message,
    ArrowLeft,
    Star,
    Search,
    Lock,
    Connection
} from '@element-plus/icons-vue'

// ==================== 类型定义 ====================

/**
 * 错误信息接口
 * @description 定义错误信息的结构
 */
interface ErrorInfo {
    code: string
    title: string
    description: string
    icon: string
    suggestions: string[]
    primaryAction?: {
        text: string
        icon: string
        action: string
    }
}

// ==================== 响应式数据 ====================

/**
 * 错误代码
 * @description 从路由参数获取的错误代码
 */
const errorCode = ref<string>('')

/**
 * 错误标题
 * @description 根据错误代码生成的错误标题
 */
const errorTitle = ref<string>('')

/**
 * 错误描述
 * @description 根据错误代码生成的错误描述
 */
const errorDescription = ref<string>('')

/**
 * 错误图标
 * @description 根据错误代码生成的错误图标
 */
const errorIcon = ref<string>('Warning')

/**
 * 错误建议
 * @description 根据错误代码生成的解决建议
 */
const errorSuggestions = ref<string[]>([])

/**
 * 主要操作
 * @description 根据错误代码生成的主要操作
 */
const primaryAction = ref<{ text: string; icon: string; action: string } | null>(null)

/**
 * 错误详情信息
 * @description 存储错误的详细信息
 */
const errorDetails = ref<string>('')

/**
 * 开发环境标识
 * @description 用于控制是否显示详细错误信息
 */
const isDevelopment = import.meta.env.DEV

// ==================== 获取实例 ====================

/**
 * 获取路由实例
 * @description 用于页面导航操作
 */
const router = useRouter()

/**
 * 获取当前路由实例
 * @description 用于获取当前路由信息
 */
const route = useRoute()

// ==================== 错误信息映射 ====================

/**
 * 错误信息映射表
 * @description 根据错误代码映射到相应的错误信息
 */
const errorInfoMap: Record<string, ErrorInfo> = {
    '400': {
        code: '400',
        title: '请求错误',
        description: '您的请求格式不正确，请检查输入参数。',
        icon: 'Warning',
        suggestions: [
            '检查URL是否正确',
            '确认所有必填字段已填写',
            '清除浏览器缓存后重试'
        ],
        primaryAction: {
            text: '重新输入',
            icon: 'Refresh',
            action: 'reload'
        }
    },
    '401': {
        code: '401',
        title: '未授权访问',
        description: '您需要登录才能访问此页面。',
        icon: 'Lock',
        suggestions: [
            '请先登录您的账户',
            '检查登录状态是否过期',
            '重新输入用户名和密码'
        ],
        primaryAction: {
            text: '立即登录',
            icon: 'User',
            action: 'login'
        }
    },
    '408': {
        code: '408',
        title: '请求超时',
        description: '服务器响应超时，请稍后重试。',
        icon: 'Connection',
        suggestions: [
            '检查网络连接是否正常',
            '稍后重新尝试访问',
            '联系网络管理员'
        ],
        primaryAction: {
            text: '重新尝试',
            icon: 'Refresh',
            action: 'reload'
        }
    },
    '502': {
        code: '502',
        title: '网关错误',
        description: '服务器网关出现错误，请稍后重试。',
        icon: 'Connection',
        suggestions: [
            '稍后重新访问',
            '检查服务器状态',
            '联系技术支持'
        ],
        primaryAction: {
            text: '重新加载',
            icon: 'Refresh',
            action: 'reload'
        }
    },
    '503': {
        code: '503',
        title: '服务不可用',
        description: '服务器暂时不可用，请稍后重试。',
        icon: 'Connection',
        suggestions: [
            '稍后重新访问',
            '检查服务器维护通知',
            '联系技术支持'
        ],
        primaryAction: {
            text: '重新尝试',
            icon: 'Refresh',
            action: 'reload'
        }
    },
    '504': {
        code: '504',
        title: '网关超时',
        description: '服务器网关超时，请稍后重试。',
        icon: 'Connection',
        suggestions: [
            '检查网络连接',
            '稍后重新尝试',
            '联系网络管理员'
        ],
        primaryAction: {
            text: '重新加载',
            icon: 'Refresh',
            action: 'reload'
        }
    }
}

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载后的处理
 * @description 根据路由参数设置错误信息和页面标题
 */
onMounted(() => {
    // 从路由参数获取错误代码
    const code = route.params.code as string || '400'

    // 获取错误信息
    const errorInfo = errorInfoMap[code] || errorInfoMap['400']

    // 设置错误信息
    errorCode.value = errorInfo.code
    errorTitle.value = errorInfo.title
    errorDescription.value = errorInfo.description
    errorIcon.value = errorInfo.icon
    errorSuggestions.value = errorInfo.suggestions
    primaryAction.value = errorInfo.primaryAction || null

    // 设置页面标题
    document.title = `${errorCode.value} - ${errorTitle.value}`

    // 记录错误信息
    console.warn(`错误 ${errorCode.value}:`, {
        path: route.path,
        fullPath: route.fullPath,
        errorCode: errorCode.value,
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent
    })

    // 生成错误详情（开发环境）
    if (isDevelopment) {
        errorDetails.value = `
错误代码: ${errorCode.value}
错误类型: ${errorTitle.value}
请求路径: ${route.path}
时间戳: ${new Date().toISOString()}
用户代理: ${navigator.userAgent}
来源页面: ${document.referrer || '直接访问'}
    `.trim()
    }

    // 可以发送错误到监控服务
    // sendErrorToMonitoring({
    //   type: errorCode.value,
    //   path: route.path,
    //   timestamp: new Date().toISOString()
    // })
})

// ==================== 交互方法 ====================

/**
 * 处理主要操作
 * @description 根据错误类型执行相应的主要操作
 */
const handlePrimaryAction = () => {
    if (!primaryAction.value) return

    switch (primaryAction.value.action) {
        case 'login':
            goLogin()
            break
        case 'reload':
            reloadPage()
            break
        default:
            reloadPage()
    }
}

/**
 * 返回上一页
 * @description 使用浏览器历史记录返回上一页
 */
const goBack = () => {
    if (window.history.length > 1) {
        router.go(-1)
    } else {
        router.push('/')
    }
}

/**
 * 返回首页
 * @description 导航到网站首页
 */
const goHome = () => {
    router.push('/')
}

/**
 * 重新加载页面
 * @description 刷新当前页面
 */
const reloadPage = () => {
    window.location.reload()
}

/**
 * 跳转到登录页面
 * @description 导航到用户登录页面
 */
const goLogin = () => {
    const currentPath = route.fullPath
    router.push({
        path: '/login',
        query: { redirect: currentPath }
    })
}

/**
 * 联系技术支持
 * @description 跳转到联系页面或显示联系方式
 */
const contactSupport = () => {
    router.push('/contact')
}
</script>

<style scoped lang="scss">
// 导入通用错误页面样式
@use '../../assets/styles/components/errors/_general-error';
</style>
